<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/xuni/bundle.js"></script>
  <div id="container"></div>
  <script>
    // 模板字符串
    // var templateStr = '我买了一个{{thing}}，好{{mood}}啊'

    var templateStr = `
      <div class="box">
        <ul>
          {{#students}}
            <li>
            学生{{name}}的爱好是
              <ol>
                {{#hobbies}}
                  <li>{{.}}</li> 
                {{/hobbies}}
              </ol>
            </li>
          {{/students}}
        </ul>
      </div>
    `
    // var templateStr = `
    //   <div>
    //     <ol>
    //       {{#students}}
    //         <li>
    //           学生{{name}}的爱好是{{hobbies}}
    //         </li>
    //       {{/students}}
    //     </ol>
    //     <ol>
    //       {{#arr}}
    //         <li>
    //           {{.}}
    //         </li>
    //       {{/arr}}
    //     </ol>
    //   </div>
    // `

    // 数据
    var data = {
      students: [
        { 'name': '小明', 'hobbies': ['游泳', '健身'] },
        { 'name': '小红', 'hobbies': ['足球', '篮球', '写代码'] },
        { 'name': '小强', 'hobbies': ['干饭'] }
      ]
      // students: [
      //   { 'name': '小明', 'hobbies': '游泳' },
      //   { 'name': '小红', 'hobbies': '足球' },
      //   { 'name': '小强', 'hobbies': '干饭' }
      // ],
      // arr: ['小明', '小红', '小强']
    }

    // var templateStr = '我爱{{somebody}}, {{somebody}}也爱我, 我考了{{a.b.c}}分'
    // var data = {
    //   somebody: '尚硅谷',
    //   a: {
    //     b: {
    //       c: 100
    //     }
    //   }
    // }
    // 调用render
    var domStr = Mustache.render(templateStr, data)
    console.log(domStr)

    // 渲染上树
    var container = document.getElementById('container')
    container.innerHTML = domStr
  </script>
</body>
</html>